<template>
  <table-form :disabled="disabled" @next="sales9Ctrl" @jump="jump">
    <template slot="title">
      <h2 class="fromDivTit">
        <div>请填写交割结果</div>
        <i
          v-if="isEdit && detailRes.step < 10"
          class="edit-icon"
          @click="isEnabled = true"
        />
      </h2>
    </template>
    <div class="form-body">
      <el-form
        ref="sales9Form"
        :model="sales9Form"
        label-width="70px"
        class="formDiv"
        :rules="rules"
      >
        <el-row :gutter="32">
          <el-form-item
            :required="true"
            label="交割相关资料:"
            label-width="100px"
            class="form_up"
          >
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <Upload
                :id="id"
                :maxcount="5"
                :urls="sales9Form.deliveryFilePath"
                :disabled="isEdit && !isEnabled"
                tip="可上传PDF、视频(mp4)、图片(jpg/ png/ jpeg)"
                format="jpeg,jpg,png,pdf,mp4"
                @getImage="getAdImage"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="4">
          <el-form-item
            label="交割说明:"
            prop="deliveryDesc"
            label-width="85px"
          >
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <el-input
                v-model="sales9Form.deliveryDesc"
                :disabled="isEdit && !isEnabled"
                type="textarea"
                :rows="5"
                placeholder="请输入"
                style="left: 12px"
              />
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
      <div v-if="jumpReason" class="jump-box">
        <div class="jump-reson">跳过原因:</div>
        <span>{{ jumpReason }}</span>
      </div>
    </div>
    <el-form-item label="" class="leasecss">
      交割日期:
      {{ dateFormat(detailRes.deliveryDate) }}
    </el-form-item>
    <template v-if="isEdit" slot="footer">
      <div class="dialog-footer">
        <el-button
          v-if="isEnabled"
          :disabled="disabled"
          type="primary"
          @click="saveEdit"
        >保存</el-button>
      </div>
    </template>
  </table-form>
</template>
<script>
import Upload from '@/components/Upload/SingleImage4'
import TableForm from '../../../lease/components/tableForm'
import { saleStep9, saleDetail, edit } from '@/api/sale'
import { dateFormat } from '@/utils/common'

export default {
  components: {
    TableForm,
    Upload
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dateFormat,
      rules: {
        deliveryDesc: [
          { required: true, message: '请输入交割说明', trigger: 'blur' }
        ]
      },
      sales9Form: {
        deliveryFilePath: '',
        deliveryDesc: '',
        id: ''
      },
      textarea: '',
      disabled: true,
      isEnabled: false,
      detailRes: {
        jumpList: []
      }
    }
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return ''
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 9
      })
      return hasReason ? hasReason.jumpNote : ''
    }
  },
  watch: {
    sales9Form: {
      handler(newVal, oldVal) {
        if (newVal.deliveryFilePath && newVal.deliveryDesc) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.getsaleDetail()
  },
  methods: {
    getAdImage(img) {
      this.sales9Form.deliveryFilePath = img
    },
    async getsaleDetail() {
      var res = await saleDetail(this.id)
      this.detailRes = res.data
      if (!this.isEdit) {
        this.sales9Form = {
          deliveryFilePath: '',
          deliveryDesc: '',
          id: this.id,
          stepName: '待交割'
        }
      } else {
        this.detailRes = res.data
        this.sales9Form = {
          deliveryFilePath: res.data.deliveryFilePath,
          deliveryDesc: res.data.deliveryDesc,
          id: this.id,
          stepName: '待交割'
        }
      }
    },
    async sales9Ctrl() {
      this.sales9Form.deliveryDate = this.sale9Data
      this.sales9Form.id = this.id
      var sale9Res = await saleStep9(this.sales9Form)
      if (sale9Res.code === 200) {
        this.$emit('next')
      }
    },
    async saveEdit() {
      var res = await edit(this.sales9Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isEnabled = false
      }
    },
    jump() {
      this.$emit('jump', this.sales9Form)
    }
  }
}
</script>
<style lang="scss" scoped>
.leasecss {
  font-size: 12px;
  color: #d0d0d0;
  margin-top: 80px;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
